import { Menu, Select, Popconfirm, message, Space, Tooltip, Button, Table, Tag } from 'antd';
import { DownOutlined, UserOutlined } from '@ant-design/icons';
import { getTime } from '@/utils/index';
import { getCityList, delCityList } from '@/utils/api';
import { FC, useState } from 'react'
import { useEffect } from 'react';

interface ItemType {
  key: string;
  name: string;
  age: number;
  address: string;
  tags: Array<string>;
}
const City: FC = () => {
  const [total, setTotal] = useState<number>(0);
  const [data, setData] = useState<any>([]);

    const Confirm = (record: any) => {
      return async() => {
       const res = await delCityList({ id: record._id })
       console.log(res)
       if(+res.status==0){
         
         const res =await getCityList()
         setData(res.result)
       }
      }
    }

  useEffect(() => {
    (async () => {
      const res = await getCityList()
      console.log(res)
      setData(res.result)
    })()
  }, [])
  const columns = [
    {
      title: '城市ID',
      dataIndex: '_id',
    },
    {
      title: '城市名称',
      dataIndex: 'city',
    },
    {
      title: '用车模式',
      dataIndex: 'useCar',
    },
    {
      title: '营运模式',
      dataIndex: 'operating',
    },
    {
      title: '城市管理员',
      dataIndex: 'admin',
    },
    {
      title: '城市开通时间',
      dataIndex: 'openTime',
      render: (text: string) => <span>{getTime(text)}</span>,
    },
    {
      title: '操作',
      key: 'action',
      render: (text: string, record: ItemType) => (
        <Popconfirm
          title="Are you sure to delete this task?"
          okText="Yes"
          cancelText="No"
          onConfirm={Confirm(record)}
        >
          <Button >删除</Button>
        </Popconfirm>
      ),
    }
  ];


  return (
    <>
      <Space >
        <Select style={{ width: 120 }} allowClear  >
          <Select.Option value="3" label="Korea">Lucy</Select.Option>
        </Select>
        <Select style={{ width: 120 }} allowClear  >
          <Select.Option value="1" label="Korea">禁停区</Select.Option>
          <Select.Option value="2" label="Korea">停车点</Select.Option>
        </Select>
        <Select style={{ width: 120 }} allowClear  >
          <Select.Option value="4" label="Korea">自营</Select.Option>
          <Select.Option value="3" label="Korea">加盟</Select.Option>
        </Select>
        <Button type="primary">查询</Button>
        <Button >重置</Button>
      </Space >
      <Table columns={columns} dataSource={data} />
    </>
  )
}
export default City